<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>query tester</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 0.20" />
<style>
#content-container {
	display: none;
}	
	
#query-area {
	width: 98%;
	height: 120x;
	font-size: 20px;
	font-family: sans-serif;
}

#result-area {
	width: 98%;
	height: auto;
	min-height: 100px;
	background-color: lightblue;
	font-family: monospace;
	font-size: 11px;
}
</style>
<script type="text/javascript" src="./lib/all.js"></script>
<script type="text/javascript" src="./lib/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="./javascript/util.js"></script>
<script type="text/javascript" src="./lib/json2.js"></script>
<script type="text/javascript" src="./lib/Downloadify/js/downloadify.min.js"></script>
<script type="text/javascript" src="./lib/Downloadify/js/swfobject.js"></script>
<script type="text/javascript">
var global = {
	"debug": true,
	"timer": undefined,
	"scope" : 'user_about_me,friends_about_me,user_notes,user_status,user_photos,friends_notes,friends_status,friends_photos,read_mailbox,read_stream'
};

$(document).ready(function(){
	trace("doc ready");
	
	$("#submit-button").click(function(event){
		trace("query submit button onclick");
		var qstr = $("#query-area").val();
		
		if(qstr != null && qstr != undefined && qstr != ""){

			global.timer = new Date();
			
			FB.api(
				{
					method: 'fql.query',
					query: qstr
				},
				function(response) {
					
					$("#timer-area").text(new Date() - global.timer).append(" ms");
					
					if(!response || response.error){
						trace("error occured");
					}else{
						$("#result-area").text(JSON.stringify(response));
					}
				}
			);
		} else {
			trace("need query to execute");
			$("#query-area").focus();
		}
	});

	

	///////////////////////////////////////////////////////////
	// Event Handler
	///////////////////////////////////////////////////////////
	FB.Event.subscribe('auth.statusChange', loginHandler);
	$("#login-button").click = login;
	$("#logout-button").click = logout;
	global.isShftDown =false;
	$("#query-area").keydown(function(event){
		var shouldBubble = true;
		switch(event.which){
			case 13:
				if(!global.isShftDown){
					 $("#submit-button").click();
					shouldBubble = false;
				}
				break;
			case 16:
				global.isShftDown = true;
				break;
		}
		
		return shouldBubble;

	});
	$("#query-area").keyup(function(event){
		if(event.which == 16) global.isShftDown = false;
	});
	
});

function login(){
	trace("login function");
	FB.login(loginHandler, {scope: global.scope});
}

function logout(){
	trace("logout function");
	FB.logout(loginHandler);
}
function loginHandler(response){
	trace("loginHandler function");
	
	if(response.authResponse){
		trace("logged in");
		afterLogin(response);
	}else{
		trace("not logged in");
		afterLogout(response);
	}
}

function afterLogin(response){
	trace("afterLogin function");
	var logoutBtn = $("<input id='logout-button' type='button' value='Logout'/>").click(logout);
	$("#login-area")
		.html("You're "+ response.status +".")
		.append(logoutBtn);

	$("#content-container").fadeIn();	
}

function afterLogout(response){
	trace("afterLogout function");
	trace(response);
	var loginBtn = $("<input id='login-button' type='button' value='Login'/>").click(login);
	$("#login-area").append(loginBtn);
	$("#content-container").fadeOut();
}
</script>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
	trace("fbAsyncInit");	
	FB.init({
		appId      : '209578142451059', // App ID
		status     : true, // check login status
		cookie     : true, // enable cookies to allow the server to access the session
		oauth      : true, // enable OAuth 2.0
		xfbml      : true  // parse XFBML
	});

// Additional initialization code here

	FB.getLoginStatus(function(response){
		trace("getLoginStatus callback");
		loginHandler(response);
	});
};
</script>
<div id="login-area"></div>
<div id="content-container">
	<div>
		<textarea id="query-area" type="textarea"></textarea><br/>
		<input id="submit-button" type="submit"/>
	</div>
	<div id="timer-area"></div>
	<div id="result-area"></div>
	<div id="downloadify"></div>
	<script type="text/javascript">
	Downloadify.create('downloadify',{
		filename: "result",
		data: function(){ 
			return $("#result-area").text();
		},
		onComplete: function(){ alert('Your File Has Been Saved!'); },
		onCancel: function(){ alert('You have cancelled the saving of this file.'); },
		onError: function(){ alert('You must put something in the File Contents or there will be nothing to save!'); },
		transparent: false,
		swf: './lib/Downloadify/media/downloadify.swf',
		downloadImage: './lib/Downloadify/images/download.png',
		width: 100,
		height: 30,
		transparent: true,
		append: false
	});
	</script>
</div>	
</body>
</html>
